<template>
  <div style="height: calc(100% - 58px)">
    <el-row class="toolbar" justify="space-between">
      <el-col :span="6">
        <el-button type="primary" icon="el-icon-upload" @click="uploadFile">上传文件</el-button>   
        <el-button type="primary"  icon="el-icon-folder-add" plain @click="CreateFolder">新建文件夹</el-button>  
     
      <el-button-group style="margin-left: 10px">
        <el-button type="primary" icon="el-icon-download" plain @click="download">下载</el-button>
        <el-button type="primary" icon="el-icon-delete" plain @click="deleteSelection">删除</el-button>
        <!-- <el-button type="primary" plain>移动到</el-button> -->
      </el-button-group>
      </el-col>
      <el-col :span="4.5" class="top-right">
        <el-input class="search" placeholder="搜索" v-model="query.name" @keyup.enter="listRefresh">
          <template #suffix> 
            <el-icon @click="listRefresh"><component is="el-icon-search"></component></el-icon>
          </template> 
        </el-input>
        <el-icon v-if="layout=='list'" class="icon" @click="layout='grid'"><Grid /></el-icon>
        <el-icon v-else class="icon" @click="layout='list'"><Fold /></el-icon>
      </el-col>
    </el-row>

    <!-- main -->
    <FileExplorer style="height:100px" :layout="layout" ref="fexp" :dataLoader="dataLoader" :rowButtons="rowButtons" :moreButtons="moreButtons"  @selection-change="onSelectionChange"/>
    
    <!-- dialog -->
    <DialogUpload ref="uploader" ></DialogUpload>
    

   

        <!-- <DialogUpload ref="uploader" :sid="getSid()" :dest-dir="query.dir" @completed="listRefresh"></DialogUpload> -->
    <!-- <DialogMove ref="move" @completed="listRefresh"></DialogMove>
    <DialogShare ref="share"></DialogShare>
    
    <DialogOutlink ref="outlink"></DialogOutlink> -->
  </div>
</template>

<script>
  import DialogUpload from "@/components/wpan/Uploader/index.vue"
  import{fetchList,remove} from '@/api/wpan/file.js'

export default {
  components:{
    DialogUpload
  },
  data() {
    return {
      query: {
        name: "",
        dir: "",
      },
      layout: "list",
      // folderBtnShown: false,
      moreButtons: [
        { name: "move", title: "移动到", action: this.move },
        { name: "rename", title: "重命名", action: this.rename },
        { name: "remove", title: "删除", action: this.remove },
      ],
      selectedItems: [],
      showUploadFileDialog:false
    };
  },
  watch: {
    $route(newVal, oldVal) {
      this.query.type = newVal.query.type; // doc,image,audio,vedio
      // this.folderBtnShown = !this.query.type;
      // console.log(this.query)
    },
  },
  computed: {
    rowButtons() {
      return [
        { name: "share", icon: "el-icon-share", action: this.share },
        { name: "download", icon: "el-icon-download", action: this.openDownload, shown: (item) => !item.dirtype },
        // { name: "viewlink", icon: "el-icon-view", action: this.viewlink },
      ];
    },
  },
  methods: {
    listRefresh(){
      this.$refs.fexp.listRefresh();
    },
    dataLoader(dir, offset, limit) { 
      return fetchList(this.query);

    },
    uploadFile(){
      this.$refs.uploader.ShowDialog()
    },
    CreateFolder(){
      console.log("create folder")
    },

    onSelectionChange(selection) {
      this.selectedItems = selection;
      // console.log(selection)
    
    },
    remove(row){
      this.$confirm("此操作将永久删除所选文件，是否继续？", "批量删除", {
        type: "warning",
        confirmButtonText: "确认",
        cancelButtonText: "取消",
      }).then(() => {
          remove([row.id]).then(res=>{
            this.$message({type: "success",message: "删除成功",});
            this.listRefresh()
          })     
      })
    },
    deleteSelection() {
      this.$confirm("此操作将永久删除所选文件，是否继续？", "批量删除", {
        type: "warning",
        confirmButtonText: "确认",
        cancelButtonText: "取消",
      }).then(() => {
        let arr=[]
        this.selectedItems.map((obj) => {
            arr.push(obj.id)
          })
        remove(arr).then(res=>{
          this.$message({type: "success",message: "删除成功" });
          this.listRefresh();         
        })         
      });
    },
    openDownload(obj) {
      this.linkLoader(obj).then((link) => {
        let a = document.createElement("a");
        a.setAttribute("href", link);
        a.setAttribute("download", obj.name);
        a.click();
        a.remove();
      });
    },
    download(){
      console.log("download")
    },
    
//end method
  }  
//end
}
</script>

<style lang="scss">
  
.toolbar {
  height: 45px;
  border-bottom: 1px solid #f2f6fd;
  margin-bottom: 5px;
}


.top-right{
  .search {
    width: 200px;
  }
  .icon{
    font-size:25px;
    vertical-align: middle;
    margin-left: 3px;
    
  }
}


</style>